<!DOCTYPE html>
<html lang="en"><head>
        <meta charset="utf-8">
        <title>Sweet Dreams - Form Validation</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Le styles -->
        <link href="css/style.css" rel="stylesheet">
        <link href="css/bootstrap.css" rel="stylesheet">

        <link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css" media="screen"  />
        <link rel="stylesheet" href="css/fullcalendar.css" media="screen"  />
        <link rel="stylesheet" href="css/chosen.css" media="screen"  />
        <link rel="stylesheet" href="css/datepicker.css" >
        <link rel="stylesheet" href="css/colorpicker.css">
        <link rel="stylesheet" href="css/glisse.css?1.css">
        <link rel="stylesheet" href="css/jquery.jgrowl.css">
        <link rel="stylesheet" href="js/elfinder/css/elfinder.css" media="screen" />
        <link rel="stylesheet" href="css/jquery.tagsinput.css" />
        <link rel="stylesheet" href="css/demo_table.css" >
        <link rel="stylesheet" href="js/export/css/TableTools.css" >
        <link rel="stylesheet" href="css/validationEngine.jquery.css">
        <link rel="stylesheet" href="css/jquery.stepy.css" />

        <link rel="stylesheet" href="css/icon/font-awesome.css">    <link rel="stylesheet" href="css/bootstrap-responsive.css">

        <link rel="alternate stylesheet" type="text/css" media="screen" title="green-theme" href="css/color/green.css" />
        <link rel="alternate stylesheet" type="text/css" media="screen" title="red-theme" href="css/color/red.css" />
        <link rel="alternate stylesheet" type="text/css" media="screen" title="black-theme" href="css/color/black.css" />
        <link rel="alternate stylesheet" type="text/css" media="screen" title="orange-theme" href="css/color/orange.css" />
        <link rel="alternate stylesheet" type="text/css" media="screen" title="purple-theme" href="css/color/purple.css" />
        <link rel="alternate stylesheet" type="text/css" media="screen" title="silver-theme" href="css/color/silver.css" />
        <link rel="alternate stylesheet" type="text/css" media="screen" title="metro-theme" href="css/color/metro.css" />

        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!--[if lte IE 8]><script type="text/javascript" src="/js/excanvas.min.js"></script><![endif]-->

        <!-- Le fav and touch icons -->
        <link rel="shortcut icon" href="/images/icons/favicon.ico">

    </head>

    <body>
        <!-- switcher color -->
        <div id="slideout">
            <a class="link-settings-colors"><i class="icon-cog"></i></a>
            <div id="slideout_inner">
                <form id="switchform">
                    <ul>
                        <li><a href="javascript:chooseStyle('none', 30)" class="colorblue">Default style</a></li>
                        <li><a href="javascript:chooseStyle('orange-theme', 30)" class="colororange">Orange theme</a></li>
                        <li><a href="javascript:chooseStyle('silver-theme', 30)" class="colorsilver">Silver theme</a></li>
                        <li><a href="javascript:chooseStyle('black-theme', 30)" class="colorblack">Black theme</a></li>
                        <li><a href="javascript:chooseStyle('green-theme', 30)" class="colorgreen">Green theme</a></li>
                        <li><a href="javascript:chooseStyle('purple-theme', 30)" class="colorpurple">Purple theme</a></li>
                        <li><a href="javascript:chooseStyle('red-theme', 30)" class="colorred">Red theme</a></li>
                        <li><a href="javascript:chooseStyle('metro-theme', 30)" class="colormetro">Metro theme</a></li>
                    </ul>
                </form>
            </div>
        </div>
        <!-- switcher color END-->

        <!--Header Start-->
        <div class="header" >

            <a href="dashboard.html" class="logo"><h1>SWEET DREAMS</h1></a>

            <div class="pull-right">

                <!--Notifications Start-->  
                <div class="notifications-head">

                    <!--Messages Start-->
                    <div class="btn-group m_left hide-mobile" >
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <span class="notification">531</span><span class="triangle-1"></span><i class="icon-comments"></i><span class="caret"></span>
                        </a>
                        <div class="dropdown-menu">

                            <span class="triangle-2"></span>
                            <div class="ichat">
                                <div class="ichat-messages">
                                    <div class="ichat-title">
                                        <div class="pull-left">New Messages</div>
                                        <div class="pull-right"><span>Update 4*</span></div>
                                        <div class="clear"></div>
                                    </div>

                                    <div class="imessage">
                                        <div class="iavatar"><img src="images/users/1.jpg" alt=""></div>
                                        <div class="imes">
                                            <div class="iauthor">Alan Cook</div>
                                            <div class="itext">All right. Thank you.</div>
                                        </div>
                                        <div class="idelete"><a href="#"><span><i class="icon-remove"></i></span></a></div>
                                        <div class="clear"></div>
                                    </div>
                                    <div class="imessage">
                                        <div class="iavatar"><img src="images/users/6.jpg" alt=""></div>
                                        <div class="imes">
                                            <div class="iauthor">Emma Clark</div>
                                            <div class="itext">Will you pay by credit card?</div>
                                        </div>
                                        <div class="idelete"><a href="#"><span><i class="icon-remove"></i></span></a></div>
                                        <div class="clear"></div>
                                    </div>
                                    <div class="imessage">
                                        <div class="iavatar"><img src="images/users/2.jpg" alt=""></div>
                                        <div class="imes">
                                            <div class="iauthor">Blake Washington</div>
                                            <div class="itext">Can I help you?</div>
                                        </div>
                                        <div class="idelete"><a href="#"><span><i class="icon-remove"></i></span></a></div>
                                        <div class="clear"></div>
                                    </div>

                                    <div class="ichat-link"><a href="#">InBox</a> <a href="#">OutBox</a> <a href="#">Spam</a> <a href="#">Trash</a>
                                        <div class="clear"></div>
                                    </div>

                                </div>
                                <a href="#" class="iview">View all</a><a href="#" class="imark">Mark all read</a>

                            </div>

                        </div>
                    </div>
                    <!--Messages END--> 

                    <!--Recent Activity Start-->
                    <div class="btn-group pull-left hide-mobile" >
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <span class="notification">77</span><span class="triangle-1"></span><i class="icon-bell"></i><span class="caret"></span>
                        </a>
                        <div class="dropdown-menu">

                            <span class="triangle-2"></span>
                            <div class="ichat">
                                <div class="ichat-messages">
                                    <div class="ichat-title">
                                        <div class="pull-left">Recent Activity</div>
                                        <div class="pull-right"><span>Update 14*</span></div>
                                        <div class="clear"></div>
                                    </div>

                                    <div class="r_activity">
                                        <div class="imessage">
                                            <div class="r_icon"><a href="#"><i class="icon-camera"></i></a></div>
                                            <div class="r_info">
                                                <div class="r_name"><strong>Alan Cook</strong> a new photo</div>
                                                <div class="r_text"><i class="icon-time"></i> 3 hours ago</div>
                                                <div class="r_link"><a href="#">View...</a></div>
                                            </div>
                                            <div class="clear"></div>
                                        </div>
                                        <div class="imessage">
                                            <div class="r_icon"><a href="#"><i class="icon-thumbs-up"></i></a></div>
                                            <div class="r_info">
                                                <div class="r_name"><strong>Isaac Donaldson</strong> like: BMW E36</div>
                                                <div class="r_text"><i class="icon-time"></i> 5 hours ago</div>
                                                <div class="r_link"><a href="#">View...</a></div>
                                            </div>
                                            <div class="clear"></div>
                                        </div>
                                        <div class="imessage">
                                            <div class="r_icon"><a href="#"><i class="icon-user"></i></a></div>
                                            <div class="r_info">
                                                <div class="r_name">Registered new user</div>
                                                <div class="r_text"><i class="icon-time"></i> 15th of May - 06:21</div>
                                                <div class="r_link"><a href="#">View...</a></div>
                                            </div>
                                            <div class="clear"></div>
                                        </div>
                                    </div>


                                </div>
                                <a href="#" class="iview">View all</a><a href="#" class="imark">Mark all read</a>

                            </div>

                        </div>
                    </div>
                    <!--Recent Activity END--> 

                </div><!--Notifications END-->

                <!--Button User Start-->  
                <div class="btn-group pull-right" >
                    <a class="btn btn-profile dropdown-toggle" id="button-profile" data-toggle="dropdown" href="#">
                        <span class="name-user"><strong>Welcome</strong>, Alan Cook</span> 
                        <span class="avatar"><img src="images/users/1.jpg" alt="" ></span> 
                        <span class="caret"></span>
                    </a>
                    <div class="dropdown-menu" id="prof_dropdown">
                        <div class="item_m"><span class="caret"></span></div>
                        <ul class="clear_ul" >
                            <li><a href="#"><i class="icon-globe"></i> Home</a></li>
                            <li><a href="#"><i class="icon-comments"></i> Messages</a></li>
                            <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
                            <li><a href="index.html"><i class="icon-off"></i> Sign Out</a></li>
                        </ul>
                    </div>
                </div>
                <!--Button User END-->  

            </div>
        </div>
        <!--Header END-->


        <!--Sidebar Start--> 
        <div id="sidebar">
            <ul class="menu-sidebar">
                <li><a href="dashboard.html"><i class="icon-home"></i> <span>General</span></a></li>
                <li><a href="ui.html"><i class="icon-group"></i> <span>UI </span></a></li>
                <li><a href="forms.html" class="active"><i class="icon-edit"></i> <span>Forms</span></a></li>
                <li><a href="widgets.html"><i class="icon-briefcase"></i> <span>Others</span></a></li>
                <li><a href="error_404.html"><i class="icon-warning-sign"></i> <span>Errors</span></a></li>
                <li><a href="messages.html"><i class="icon-gift"></i> <span>Bonus</span></a></li>
            </ul>


        </div>
        <!--Sidebar END-->

        <!--Content Start-->
        <div id="content">


            <!--SpeedBar Start-->
            <div class="speedbar">
                <div class="speedbar-content">

                    <ul class="menu-drop">
                        <li><a href="#"><i class="icon-chevron-down"></i></a>
                            <ul>
                                <li><a href="dashboard.html">Dashboard</a></li>
                                <li><a href="charts.html">Charts</a></li>
                                <li><a href="gallery.html">Image Gallery</a></li>
                                <li><a href="calendar.html">Calendar</a></li>
                                <li><a href="ui.html">UI elements</a></li>
                                <li><a href="icons.html">Icons</a></li>
                                <li><a href="buttons.html">Buttons</a></li>
                                <li><a href="grids.html">Grids</a></li>
                                <li><a href="forms.html">Inputs & elements</a></li>
                                <li><a href="form_validation.html">Validation</a></li>
                                <li><a href="wizard.html">Wizard</a></li>
                                <li><a href="file_manager.html">File Manager</a></li>
                                <li><a href="conversation.html">Conversation</a></li>
                                <li><a href="widgets.html">Widgets</a></li>
                                <li><a href="typography.html">Typography</a></li>
                                <li><a href="tables.html">Tables</a></li>
                                <li><a href="datatables.html">DataTables</a></li>
                                <li><a href="error_404.html">Error 404</a></li>
                                <li><a href="error_500.html">Error 500</a></li>
                                <li><a href="error_503.html">Error 503</a></li>
                                <li><a href="error_offline.html">Error Offline</a></li>
                                <li><a href="messages.html">Messages</a></li>
                                <li><a href="search.html">Search</a></li>
                                <li><a href="profile.html">Profile</a></li>
                                <li><a href="stream.html">Stream</a></li>
                                <li><a href="invoice.html">Invoice</a></li>
                            </ul>  
                        </li>
                    </ul>

                    <ul class="menu-speedbar">
                        <li><a href="forms.html">Inputs & elements</a></li>
                        <li><a href="form_validation.html" class="act_link">Validation</a></li>
                        <li><a href="wizard.html">Wizard</a></li>
                        <li><a href="file_manager.html">File Manager</a></li>
                    </ul>


                </div>
            </div>
            <!--SpeedBar END-->

            <!--Search Start-->   
            <div class="search">
                <form class="search-form">
                    <input type="text" name="" value="" placeholder="Enter keywords">
                </form>
                <div class="clear"></div>	
            </div>
            <!--Search END-->

            <!--CONTENT MAIN START-->
            <div class="content">

                <!--Form Validation Start-->
                <div class="grid">
                    <div class="grid-title">
                        <div class="pull-left">Form Validation</div>
                        <div class="pull-right"></div>
                        <div class="clear"></div>
                    </div>
                    <div class="grid-content">
                        <form id="formID" class="formular" method="post">

                            <div class="formRow">
                                <label>Field is required: </label>
                                <div class="formRight">
                                    <input type="text" name="req" id="req"  class="validate[required] span"> 
                                </div>
                            </div>
                            <div class="formRow">
                                <label>Field is required: </label>
                                <div class="formRight">
                                    <select name="sport" id="sport" class="validate[required] span_select">
                                        <option value="">Choose a sport</option>
                                        <option value="option1">Tennis</option> 
                                        <option value="option2">Football</option>
                                        <option value="option3">Golf</option>
                                    </select>
                                </div>
                            </div>
                            <div class="formRow">
                                <label>Field is required: </label>
                                <div class="formRight">
                                    <select name="sport2" id="sport2" multiple class="validate[required] span_select">
                                        <option value="">Choose a sport</option>
                                        <option value="option1">Tennis</option>
                                        <option value="option2">Football</option>
                                        <option value="option3">Golf</option>
                                    </select> 
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <hr>
                            <div class="formRow">
                                <label>Enter a URL: </label>
                                <div class="formRight">
                                    <input value="http://" class="validate[required,custom[url]] span" type="text" name="url" id="url" />
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <hr>
                            <div class="formRow">
                                <label>Password: </label>
                                <div class="formRight">
                                    <input value="karnius" class="validate[required] span" type="password" name="password" id="password" />
                                </div>
                            </div>
                            <div class="formRow">
                                <label>Confirm password: </label>
                                <div class="formRight">
                                    <input value="kaniusBAD" class="validate[required,equals[password]] span" type="password" name="password2" id="password2" />
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <hr>
                            <div class="formRow">
                                <label>Write 'HELLO': </label>
                                <div class="formRight">
                                    <input value="" class="validate[required,funcCall[checkHELLO]] span" type="text" id="lastname" name="lastname" />
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <hr>
                            <div class="formRow">
                                <label>MinSize: </label>
                                <div class="formRight">
                                    <input value="" class="validate[required,minSize[6]] span" type="text" name="minsize" id="minsize" />
                                </div>
                            </div>
                            <div class="formRow">
                                <label>MaxSize: </label>
                                <div class="formRight">
                                    <input value="0123456789" class="validate[optional,maxSize[6]] span" type="text" name="maxsize" id="maxsize" />
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <hr>
                            <div class="formRow">
                                <label>Min: </label>
                                <div class="formRight">
                                    <input value="-7" class="validate[required,custom[integer],min[-5]] span" type="text" name="min" id="min" />
                                </div>
                            </div>
                            <div class="formRow">
                                <label>Max: </label>
                                <div class="formRight">
                                    <input value="55" class="validate[required,custom[integer],max[50]] span" type="text" name="max" id="max" />
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <hr>
                            <div class="formRow">
                                <label>Past: </label>
                                <div class="formRight">
                                    <input value="2009/06/30" class="validate[custom[date],past[2010/01/01]] span" type="text" name="past" id="past" />
                                    Checks that the value is a date in the past

                                    <br/>

                                    <span>Please enter a date ealier than 2010/01/01</span>
                                </div>
                            </div>
                            <div class="formRow">
                                <label>Future: </label>
                                <div class="formRight">
                                    <input value="2011-01-" class="validate[custom[date],future[NOW]] span" type="text" name="future" id="future" />
                                    Checks that the value is a date in the future

                                    <br/>

                                    <span>Please enter a date older than today's date</span>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <hr>
                            <div class="formRow">
                                <label>Group required: </label>
                                <div class="formRight">
                                    Checks if at least one of the input is not empty.
                                    <input value="" class="validate[groupRequired[payments]] span" type="text" name="creditcard1" id="creditcard1" />

                                    <label><strong>OR</strong></label><br/><br/>

                                    <label>Please enter a paypal acccount</label>

                                    <input value="" class="validate[groupRequired[payments],custom[email]] span" type="text" name="paypal" id="paypal" />

                                    <label><strong>OR</strong></label><br/><br/>

                                    <label>Please enter a bank account</label>

                                    <input value="" class="validate[groupRequired[payments],custom[integer]] span" type="text" name="bank" id="bank" />

                                    <label><strong>OR</strong></label><br/><br/>

                                    <label>Please  choose from select</label>

                                    <select class="validate[groupRequired[payments]] span_select" name="bank2" id="bank2">

                                        <option value="">Choose a payment option</option>

                                        <option value="Paypal">Paypal</option>

                                        <option value="Bank">Bank account</option>

                                    </select>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <hr>
                            <div class="formRow">
                                <label>Date Range: </label>
                                <div class="formRight">
                                    Checks that the start date is before the end date.
                                    Please enter an end date ealier than the start date<br /><br />
                                    <label for="date1">Start Date : </label>
                                    <input value="9/1/2009"  class="validate[dateRange[grp1]] span" type="text" id="date1" />
                                    <label for="date2">End Date : </label>
                                    <input value="3/18/1985" class="validate[dateRange[grp1]] span" type="text" id="date2" />
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <hr>
                            <div class="formRow">
                                <label>Date Time Range: </label>
                                <div class="formRight">
                                    Checks that the start date and time are before the end date and time.
                                    Please enter an end date ealier than the start date<br /><br />
                                    <label for="date1">Start Date Time: </label>
                                    <input value="9/1/2009 9:30:00 PM"  class="validate[dateTimeRange[grp2]] span" type="text" id="datetime1" />
                                    <label for="date2">End Date Time: </label>
                                    <input value="9/1/2009 2:30:00 AM" class="validate[dateTimeRange[grp2]] span" type="text" id="datetime2" />
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <hr>
                            <div class="formRow">
                                <label>Credit Card: </label>
                                <div class="formRight">
                                    Checks that the credit card number is at least theoretically valid, according the to the <a href="http://en.wikipedia.org/wiki/Luhn_algorithm">Luhn checksum algorithm</a>, but not whether the specific card number is active with a bank, etc.
                                    <br/>
                                    <br/>
                                    Since credit cards are often presented in different formats, spaces and hyphens (' ','-') are simply ignored.
                                    <br/>
                                    Examples:<br/>
                                    <ul>
                                        <li>4111 1111 1111 1111</li>
                                        <li>3737-321345-610004</li>
                                    </ul>
                                    <br/>
                                    <input value="" class="validate[required,creditCard] span" type="text" name="creditcard2" id="creditcard2" />

                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <hr>
                            <div class="formRow">
                                <label>Radio Groupe: </label>
                                <div class="formRight distance input-valid-default">
                                    <p><input class="validate[required]" type="radio" name="group0" id="radio1" value="5"/></p>
                                    <p><input class="validate[required]" type="radio" name="group0" id="radio2" value="3"/></p>
                                    <p><input class="validate[required]" type="radio" name="group0" id="radio3" value="9"/></p>

                                </div>
                            </div>
                            <div class="formRow">
                                <label>Minimum 2 checkbox: </label>
                                <div class="formRight distance input-valid-default">
                                    <p><input class="validate[minCheckbox[2]]" type="checkbox" name="group[group]" id="maxcheck1" value="5"/></p>
                                    <p><input class="validate[minCheckbox[2]]" type="checkbox" name="group[group]" id="maxcheck2" value="3"/></p>
                                    <p><input class="validate[minCheckbox[2]]" type="checkbox" name="group[group]" id="maxcheck3" value="9"/></p>
                                </div>
                            </div>
                            <div class="formRow">
                                <label>Maximum 2 checkbox: </label>
                                <div class="formRight distance input-valid-default">
                                    <p><input class="validate[maxCheckbox[2]]" type="checkbox" name="group2" id="maxcheck4" value="5" checked/></p>
                                    <p><input class="validate[maxCheckbox[2]]" type="checkbox" name="group2" id="maxcheck5" value="3" checked/></p>
                                    <p><input class="validate[maxCheckbox[2]]" type="checkbox" name="group2" id="maxcheck6" value="9" checked/></p>

                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <hr>
                            <input type="submit" class="btn btn-large btn-primary" value="Validate &amp; Send the form!">

                        </form>
                        <div class="clear"></div>
                    </div>    
                </div>
                <!--Form Validation END-->


            </div>
            <!--CONTENT MAIN END-->

        </div>
        <!--Content END-->

        <!-- Le javascript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery-ui.min.js"></script>

        <script src="js/bootstrap.min.js"></script>
        <script src="js/bootstrap-datepicker.js"></script>
        <script src="js/bootstrap-colorpicker.js"></script>
        <script src="js/google-code-prettify/prettify.js"></script>

        <script src="js/jquery.flot.min.js"></script>
        <script src="js/jquery.flot.pie.js"></script>
        <script src="js/jquery.flot.orderBars.js"></script>
        <script src="js/jquery.flot.resize.js"></script>
        <script src="js/graphtable.js"></script>
        <script src="js/fullcalendar.min.js"></script>
        <script src="js/chosen.jquery.min.js"></script>
        <script src="js/autoresize.jquery.min.js"></script>
        <script src="js/jquery.tagsinput.min.js"></script>
        <script src="js/jquery.autotab.js"></script>
        <script src="js/elfinder/js/elfinder.min.js" charset="utf-8"></script>
        <script src="js/tiny_mce/tiny_mce.js"></script>
        <script src="js/validation/languages/jquery.validationEngine-en.js" charset="utf-8"></script>
        <script src="js/validation/jquery.validationEngine.js" charset="utf-8"></script>
        <script src="js/jquery.jgrowl_minimized.js"></script>
        <script src="js/jquery.dataTables.min.js"></script>
        <script src="js/export/ZeroClipboard/ZeroClipboard.js"></script>
        <script src="js/export/js/TableTools.js"></script>
        <script src="js/jquery.mousewheel.js"></script>
        <script src="js/jquery.jscrollpane.min.js"></script>
        <script src="js/jquery.stepy.min.js"></script>
        <script src="js/jquery.validate.min.js"></script>
        <script src="js/raphael.2.1.0.min.js"></script>
        <script src="js/justgage.1.0.1.min.js"></script>
        <script src="js/glisse.js"></script>
        <script src="js/styleswitcher.js"></script>

        <script src="js/application.js"></script>


    </body>
</html>

